<template>
  <view class="change-school">
    <u-popup
      mode="bottom"
      v-model="show"
      border-radius="20"
      :closeable="true"
      height="830rpx"
      @close="closePoup"
      close-icon-pos="top-right"
    >
      <view class="title">更改学校</view>
      <view class="choose-school">
        <view class="school" @click="chooseClass1 = false">学校</view>
        <view style="width: 104rpx">
          <u-line color="#07C38F" :style="{ fontWeight: 'blod' }" />
        </view>
        <view
          :class="['classroom', chooseClass1 == true ? 'chooseClassSty' : '']"
          @click="chooseClass"
          >班级</view
        >
      </view>

      <scroll-view scroll-y="true" class="content" v-if="!chooseClass1">
        <view class="school-list">
          <view
            v-for="(item, index) in schoolList"
            :key="index"
            @click="changeSchool(item)"
          >
            <view
              :class="[chooseSchool == item.school_id ? 'school-check' : '']"
            >
              {{ item.name }}</view
            >
            <image
              v-if="chooseSchool == item.school_id"
              src="@/static/report/gou.png"
              style="width: 32rpx; height: 21rpx"
            />
          </view>
        </view>
      </scroll-view>

      <scroll-view scroll-y="true" class="content" v-else>
        <view class="school-list">
          <view
            v-for="(item, index) in classList"
            :key="index"
            @click="changeClass(item)"
          >
            <view
              :class="[chooseClassId == item.class_id ? 'school-check' : '']"
            >
              {{ item.class_name }}</view
            >
            <image
              v-if="chooseClassId == item.class_id"
              src="@/static/report/gou.png"
              style="width: 32rpx; height: 21rpx"
            />
          </view>
        </view>
      </scroll-view>

      <view style="height: 100rpx; line-height: 100rpx; text-align: center">
        <u-button
          type="success"
          shape="circle"
          size="medium"
          :custom-style="customStyle"
          @click="submit"
          >修改</u-button
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      chooseSchool: null, //选中的学校
      chooseClassId: null, //选中的教室
      chooseClass1: false, //是否选择了class
      schoolList: [], //校园list
      classList: [], //class_list
      sexList: ["无", "小帅哥", "小公主"],
      customStyle: {
        width: "95%",
      },
    };
  },
  methods: {
    /**
     * 修改学校
     */
    changeSchool(Info) {
      this.chooseSchool = Info.school_id;

      //获取class
      var form = {
        school_id: this.chooseSchool,
      };
      //点击学校 就必须修改班级 默认该学校的第一个班级
      this.$u.api.classListApi(form).then((res) => {
        this.classList = res.data;
        this.chooseClassId = res.data[0].class_id;
        this.chooseClass1 = true;
      });
    },

    /**
     * 更改教室
     */
    changeClass(Info) {
      this.chooseClassId = Info.class_id;
    },
    /**
     * 更改学校
     */
    submit() {
      var form = {
        baby_id: this.vuex_babyInfo.baby_id,
        school_id: this.chooseSchool,
        class_id: this.chooseClassId,
      };
      this.$u.api.changeSchoolApi(form).then((res) => {
        var newBabyInfo = this.vuex_babyInfo;
        // 更改信息
        newBabyInfo.school_name = res.data.school_name;
        newBabyInfo.class_name = res.data.class_name;
        newBabyInfo.class_id = res.data.class_id;
        newBabyInfo.school_id = res.data.school_id;

        this.$u.vuex("vuex_babyInfo", newBabyInfo);
        this.$parent.infoList = [
          {
            label: "姓名",
            value: this.vuex_babyInfo.name,
          },
          {
            label: "性别",
            value: this.sexList[this.vuex_babyInfo.sex],
          },
          {
            label: "出生日期",
            value: this.vuex_babyInfo.birthday,
          },
          {
            label: "电话号码",
            value: this.vuex_userInfo.phone,
          },
          {
            label: "学校",
            value: this.vuex_babyInfo.school_name,
          },
          {
            label: "班级",
            value: this.vuex_babyInfo.class_name,
          },
        ];
        this.show = false;
        uni.showToast({
          title: "修改成功",
          duration: 1000,
        });
      });
    },

    /**
     * 选择 班级
     */
    chooseClass() {
      this.chooseClass1 = true;
    },

    /**
     * 关闭弹窗
     */
    closePoup() {
      this.chooseClass1 = false;
    },
  },
  onLoad(option) {},
};
</script>

<style scoped lang ='scss' >
.change-school {
  .title {
    color: #333333;
    font-size: 32rpx;
    font-weight: Bold;
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
    width: 100%;
    border-bottom: 1rpx solid #e6e6e6;
  }
  .content {
    /* padding: 24rpx; */
    width: auto;
    height: 500rpx;
    padding: 0 30rpx;
    .school-list {
      /* display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center; */
      & > view {
        padding: 40rpx 0;
        border-bottom: 1rpx solid #f2f6fc;
        color: #666666;
        font-size: 28rpx;
        font-weight: Regular;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .school-check {
          color: #07c38f;
          font-size: 36rpx;
        }
      }
      & > view:last-child {
        border-bottom: none;
      }
    }
  }
  .choose-school {
    height: 120rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .school {
      height: 46rpx;
      line-height: 46rpx;
      width: 120rpx;
      background-color: #07c38f;
      color: #ffffff;
      border-radius: 10rpx;
      text-align: center;
    }
    .classroom {
      height: 46rpx;
      line-height: 46rpx;
      width: 120rpx;
      background-color: #f2f2f2;
      color: #666666;
      border-radius: 10rpx;
      text-align: center;
    }
    .chooseClassSty {
      background-color: #07c38f;
      color: #ffffff;
    }
  }
  .footer {
    height: 150rpx;
    width: 100%;
    margin: 0 auto;
  }
}
</style>
